<template>
    <div class="product">
        <!-- 顶部导航栏 -->
        <div class="header" style="position: fixed;top: 0;width: 100%;z-index: 100;">
            <div class="navbar">
                <span @click="$router.go(-1)" style="float: left;padding-left: 20px;font-size: 14px;">
                    <van-icon name="arrow-left" /></span>
                <span>产品信息</span>
            </div>
        </div>
        <!-- 中间产品展示区域 -->
        <div class="content_product" style="margin-top: 46px;">
            <!-- 侧边菜单栏 -->
            <div class="leftSideBar">
                <van-sidebar v-model="activeKey" @change="onChange">
                    <van-sidebar-item v-for="category in categoryData" :key="category.id" :title="category.name" />
                </van-sidebar>
            </div>
            <!-- 右侧产品展示区域 -->
            <div class="rightProductArea" style="overflow-y: auto;">
                <van-card v-for="product in productData" :key="product.id" :price="'￥'+product.price+'.00'"
                    :desc="product.description" :title="product.name" :thumb="product.photo">
                    <template #footer>
                        <!-- 步进器 -->
                        <!-- <van-stepper default-value="0" :min="0" v-model="product.number"
                            @change="numberChangeHandler(product)" /> -->
                        <van-stepper default-value="0" :min="0" v-model="product.number" theme="round" button-size="22"
                            disable-input @change="numberChangeHandler(product)" />
                    </template>
                </van-card>
            </div>
        </div>
        <!-- 总价提交 -->
        <div class="submitBar">
            <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit" :disabled="flag" />
        </div>
        <div style="height: 80px;"></div>
    </div>
</template>
<script>
    // 引入vuex的辅助函数
    import {
        mapActions,
        mapState,
        mapGetters,
        mapMutations
    } from 'vuex'
    import {
        get
    } from '@/http/axios'
    export default {
        data() {
            return {
                // 根据首页点击的索引 确定侧边菜单栏默认被选中的是哪一个
                activeKey: this.$route.query.activeKey,
                // 首页点击跳转到产品页面时传递的栏目id
                categoryId: this.$route.query.categoryId,
                // 提交订单禁用按钮
                subDisabled: false,
                flag: true
            }
        },
        watch: {
            total(newVal, oldVal) {
                this.flag = false
            }
        },
        methods: {
            // 引入产品栏目数据
            ...mapActions('category', ['getAllCategoryData']),
            // 引入根据栏目id获取产品数据的方法
            ...mapActions('product', ['getAllProductData']),
            // 引入购物车模块的方法
            ...mapMutations('shopcart', ['addShopcart', 'clearShopcart']),
            // 提交订单按钮禁用状态

            // 提交订单
            onSubmit() {
                if (this.total == 0) {
                    this.flag = true
                } else {
                    this.$router.push({
                        path: '/manager/orderConfirm'
                    })
                }

            },

            // 根据监听步进器的数量变化 拿到对应的产品的信息
            numberChangeHandler(product) {
                // 定义一个产品参数
                let orderLine = {
                    productId: product.id,
                    productName: product.name,
                    price: product.price,
                    number: product.number
                }
                // 调用添加购物车的方法
                if (orderLine.number != 0) {
                    this.addShopcart(orderLine)
                } else {
                    this.addShopcart()
                }
            },
            // 切换侧边栏 获取不同的产品数据
            onChange(index) {
                // 当侧边栏切换的时候 动态的更新 categoryId
                this.categoryId = this.categoryData[index].id
                // 重新刷新页面数据
                this.queryProduct()
            },
            // 获取产品栏目数据
            queryCategory() {
                // 定义一个参数
                let data = {
                    page: 1,
                    pageSize: 100,
                }
                this.getAllCategoryData(data)
            },
            // 获取产品数据
            queryProduct() {
                let data = {
                    page: 1,
                    pageSize: 100,
                    productCategoryId: this.categoryId
                }
                // 调用获取产品数据的方法
                this.getAllProductData(data)
            }
        },
        created() {
            // 自动获取产品栏目数据
            this.queryCategory()
            // 自动获取产品数据
            this.queryProduct()
            // 清空购物车
            this.clearShopcart()
        },
        computed: {
            // 获取产品栏目的数据
            ...mapState('category', ['categoryData']),
            // 获取产品数据
            ...mapState('product', ['productData']),
            // 购物车总价
            ...mapGetters('shopcart', ['total']),
        }
    }
</script>
<style scoped>
    /* 步进器 */
    .van-stepper {
        margin-right: 10px;
    }

    /* 右侧内容区域 */
    .content_product .rightProductArea {
        /* 把剩余部分的全部空间都占据 */

        flex: 1;
        overflow-y: auto;
        position: relative;
        margin-left: 150px;
    }

    /* 左侧菜单栏 */
    .leftSideBar {

        width: 150px;
        position: fixed;
        overflow: hidden;

    }

    .van-sidebar {
        width: 150px;
        text-align: center;

    }

    /* 中间产品展示区域的样式 */
    .content_product {
        display: flex;
    }

    .navbar {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        height: 46px;

        text-align: center;
        color: #fff;

    }

    .navbar span {
        color: #fff;
        margin-top: 0;
        line-height: 46px;
    }

    .van-stepper--round .van-stepper__plus {
        background-color: #faaca8;
    }
</style>